<template>
	<view class="search-container">
		<view class="search-box">
			<icon :class="{ searchIcon: !searchContent.length }" type="search" size="17"></icon>
			<button @tap="empty" v-show="searchContent.length" type="default">取消</button>
			<input @confirm="addHistory" :class="{ search: !searchContent.length }" type="text" value="" placeholder="请输入你想要的商品" v-model="searchContent" />
		</view>
		<view class="history-box">
			<view class="top">
				<text>历史搜索</text>
				<icon @tap="clear" type="clear" size="15"></icon>
			</view>
			<view class="bottom">
				<view v-for="(item,index) in historyList" :key="index">{{item}}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchContent: '',
			historyList: []
		};
	},
	methods: {
		addHistory() {
			if(this.searchContent === ''){
				return
			}
			this.historyList.push(this.searchContent)
			const set = new Set(this.historyList)
			this.historyList = [...set]
			if(this.historyList.length > 5){
				this.historyList.shift()
			}
			this.empty()
		},
		clear() {
			this.historyList = []
		},
		empty() {
			this.searchContent = '';
		}
	}
};
</script>

<style lang="less" scoped>
.search-container {
	.search-box {
		position: relative;
		padding: 40rpx 20rpx;
		background-color: #efefef;
		box-sizing: border-box;
		icon {
			position: absolute;
			height: 20rpx;
			top: 50rpx;
			left: 35rpx;
			&.searchIcon {
				left: 45rpx;
			}
		}
		input {
			padding-left: 70rpx;
			width: 470rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 4rpx;
			background-color: #ffffff;
			&.search {
				width: 620rpx;
				margin: 0 auto;
			}
		}
		button {
			float: right;
			width: 160rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border-radius: 4rpx;
			background-color: #efefef;
			font-size: 40rpx;
		}
	}
	.history-box {
		padding: 20rpx;
		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 15 rpx;
		}
		.bottom {
			display: flex;
			margin-top: 25rpx;
			flex-wrap: wrap;
			> view {
				padding: 20rpx;
				background-color: #dedede;
				margin-right: 25rpx;
				margin-bottom: 15rpx;
			}
		}
	}
}
</style>
